import React, { Component } from "react";
import { connect } from "dva";
import { Modal, Table } from "antd";
import styles from "./PushDescModal.less";

class PushDescModal extends Component {
  state = {
    current: 1
  };

  columns = [
    {
      title: "参数名称",
      dataIndex: "paramName",
      key: "paramName"
    },
    {
      title: "参数类型",
      dataIndex: "paramType",
      key: "paramType"
    },
    {
      title: "示例值",
      dataIndex: "sampleValue",
      key: "sampleValue"
    },
    {
      title: "描述",
      dataIndex: "comment",
      key: "comment"
    }
  ];

  componentDidMount() {
    this.refresh();
  }

  // 初始化页面
  refresh = () => {
    this.props.dispatch({
      type: "pushRules/queryMessageParameter",
      payload: {
        pageIndex: 1,
        pageSize: 10
      }
    });
  };

  onChange = page => {
    this.setState({
      current: page
    });
    this.props.dispatch({
      type: "pushRules/queryMessageParameter",
      payload: {
        pageIndex: page,
        pageSize: 10
      }
    });
  };

  render() {
    const { showDescModal, onCancel, pushRules = {} } = this.props;
    const { messageParameter, parameterTotalCount } = pushRules;
    const { current } = this.state;
    return (
      <Modal
        title="推送内容说明"
        visible={showDescModal}
        onCancel={onCancel}
        zIndex={999}
        style={{ top: 20 }}
        width={600}
        className={styles.root}
        footer={null}
      >
        <div className={styles.desc}>
          *内容中必须以
          {"{$参数}"}
          的形式写入推送参数，其他写入形式无效，可写入参数如下：
        </div>
        <Table
          dataSource={messageParameter}
          columns={this.columns}
          onChange={this.onChange.bind(this, current)}
          rowKey={(item = {}) => item.id}
          pagination={{
            total: parameterTotalCount
          }}
        />
      </Modal>
    );
  }
}

export default connect(stores => ({
  pushRules: stores.pushRules
}))(PushDescModal);
